<template>
  <div>
    <div class="content-wrapper">
      <div ref="myContent">
        <ul class="content-left">
          <li v-for="(item,index) in goods" :class="{act:myIndex===index}" @click="scrollTo(index)">{{item.name}}</li>
        </ul>
      </div>
      <div ref="myFoot" class="myFoot">
        <div class="content-right">
          <dl v-for="foods in goods">
            <dt>{{foods.name}}</dt>
            <dd v-for="food in foods.foods">
              <img :src="food.icon" alt="">
              <div class="info">
                <h3>{{food.name}}</h3>
                <p v-if="food.info">{{food.info.substr(0, 15) + "..."}}</p>
                <p>月售{{food.sellCount}}份 / 好评率{{food.rating}}%</p>
                <div class="car">
                  <p><span>￥{{food.price}}</span> 起</p>
                  <button-car :food="food" @ball-click="ballEvent"></button-car>
                </div>
              </div>
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <footer-box :selected="selectedGoos" ref="shopCar"></footer-box>
  </div>

</template>
<script>
  import footerBox from '@/components/footer'
  import BScroll from 'better-scroll'
  import buttonCar from '@/components/buttonBar'
  export default{
    data(){
      return {
        goods: [],
        heights: [],
        scrollY: 0
      }
    },
    components: {
      footerBox,
      BScroll,
      buttonCar
    },
    mounted(){
      this.axios.get('/api/goods').then(res => {
        this.goods = res.data.data
        this.$nextTick(() => {
          this._initScroll()
          this._countHeight()
        })
      })
    },
    methods: {
        ballEvent(target){
             this.$refs.shopCar.ballClick(target)
        },
      _initScroll(){
        this.myContent = new BScroll(this.$refs.myContent, {
          click: true
        })
        this.myFoot = new BScroll(this.$refs.myFoot, {
          probeType: 3,
          click: true

        })
        this.myFoot.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y))
        })
      },
      _countHeight(){
        let dts = this.$refs.myFoot.getElementsByTagName('dt')
        for (let i = 0; i < dts.length; i++) {
          this.heights.push(dts[i].offsetTop)
        }
      },
      scrollTo(index){
        this.myFoot.scrollTo(0, -this.heights[index], 300)
      }
    },
    computed: {
      myIndex(){
        for (let i = 0; i < this.heights.length; i++) {
          let now = this.heights[i]
          let next = this.heights[i + 1]
          if (this.scrollY <= now && this.scrollY < next) {
            return i;
          } else if (!next) {
            return i;
          }
        }
        return 0;
      },
      selectedGoos(){
        let foods = []
        if (this.goods.length == 0) return []
        this.goods.forEach(good => {
          good.foods.forEach(food => {
            if (food.count > 0) {
              foods.push(food)
            }
          })
        })
        return foods
      }
    }
  }
</script>
<style lang="less" scoped>
  @import '../../static/less/var.less';

  .content-wrapper {
    width: 100%;
    position: absolute;
    top: @base*354rem;
    left: 0;
    bottom: @base*96rem;
    display: flex;
    overflow: hidden;
    .content-left {
      width: @base*170rem;
      li {
        padding: @base*30rem @base*10rem;
        text-align: center;
        background: #F8F8F8;
        color: #666;
        border-bottom: 1px solid #f5f5f5;
        &.act {
          border-left: 2px solid #0094FF;
        }

      }
    }
    .myFoot {
      width: 100%;
    }
    .content-right {
      width: 100%;
      background: #999;
      dl {
        width: 100%;
      }
      dt {
        width: 100%;
        background: #f5f5f5;
        height: @base*33rem;
        padding: @base*15rem @base*20rem;
        font-size: @base*30rem;
        color: #333;
      }
      dd {
        background: #fff;
        padding: @base*20rem @base*20rem;
        display: flex;
        font-size: @base*20rem;
        color: #999;
        border-bottom: 1px solid #f5f5f5;
        img {
          width: @base*104rem;
          height: @base*104rem;
        }
        .info {
          flex: 1;
          margin-left: @base*20rem;
          display: flex;
          flex-direction: column;
          h3 {
            flex: 1;
            color: #333;
            font-size: @base*30rem;
          }
          p {
            flex: 1;
          }
          div {
            display: flex;
            justify-content: space-between;
            p {
              flex: 0.7;
            }
            span {
              color: orange;
              font-size: @base*30rem;
            }

          }
        }
      }
    }
  }
</style>
